<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>统计</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">


                            <form class="layui-form" action="" onsubmit="javascript:return false;">
                                <div class="layui-form-item">
                                    <label class="">加人统计</label>
                                    <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="preRange();"><i class="layui-icon layui-icon-prev"></i></button>
                                    <input type="text" name="date_from" id="LAY-date-from" placeholder="yyyy-mm-dd" autocomplete="off" style="width: 80px;" onchange="reloadList()">
                                    <span class="layui-hide">
                                &nbsp;至
                                <input type="text" name="date_to" id="LAY-date-to" placeholder="yyyy-mm-dd" autocomplete="off" style="width: 80px;" onchange="reloadList();">
                                </span>
                                    <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="nextRange();"><i class="layui-icon layui-icon-next"></i></button><button class="layui-btn layui-btn-xs" onclick="reloadList();">搜索</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body">
                            <table id="LAY-report" lay-filter="LAY-report"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var changeDateRange;
        var nextRange;
        var preRange;
        var reloadList;
        layui.use(['table', 'laydate', 'form'], function(){
            var $ = layui.$
                ,table = layui.table
                ,form = layui.form
                ,laydate = layui.laydate;

            form.render();

            var dateFrom = $('#LAY-date-from').val();
            var dateTo = $('#LAY-date-to').val();

            table.render({
                elem: '#LAY-report'
//            ,height: 315
                ,url: '/report/list_data' //数据接口
//            ,page: false //开启分页
                ,where: { //设定异步数据接口的额外参数，任意设
                    dateFrom: dateFrom,
                    dateTo: dateTo
                }
                ,cols: [[ //表头
                    {type: 'numbers', title: '序号', fixed: 'left'}
                    ,{field: 'name', width:200, title: '微信组'}
                    ,{field: 'version', title: '登录版本', width:140, templet: '#versionTpl'}
                    ,{field: 'wechat_num', title: '微信号数量/在线', width:250, templet: '#wechatNumTpl'}
                    ,{field: 'request', title: '请求次数', width:100}
                    ,{field: 'friend', title: '通过好友/单向粉', width:140, templet: '#friendTpl'}
                    ,{field: 'total', title: '待通过', width:100, templet: '#totalTpl'}
                    ,{field: 'friend_rate', title: '通过率', width:100, templet: '#friendRateTpl'}
                    ,{toolbar: '#barDemo'}
                ]]
                ,title: '微信列表'
//            ,toolbar: '#headBar'
//            ,defaultToolbar: ['filter']
            });

            reloadList = function () {
                var dateFrom = $('#LAY-date-from').val();
                var dateTo = $('#LAY-date-to').val();
                table.reload('LAY-report', {
                    where: { //设定异步数据接口的额外参数，任意设
                        dateFrom: dateFrom,
                        dateTo: dateTo
                    }
//                ,page: {
//                    curr: 1 //重新从第 1 页开始
//                }
                });
            };

            laydate.render({
                elem: '#LAY-date-from'
//            ,range: true //或 range: '~' 来自定义分割字符
                ,value: '2019-11-19'
            });

            laydate.render({
                elem: '#LAY-date-to'
                ,value: '2019-11-19'
            });

            form.on('radio(date_range)', function(data){
                var now = new Date();
                var date = formatDate(now);
                changeDateRange(date, data.value);
            });

            changeDateRange = function (date, dateRange) {
                var dateFrom = date;
                var dateTo = dateFrom;
                switch (dateRange) {
                    case 1:
                        break;
                    case 7:
                        dateTo = calculateDate(dateFrom, -7);
                        break;
                    case 30:
                        dateTo = calculateDate(dateFrom, -30);
                        break;
                    case 90:
                        dateTo = calculateDate(dateFrom, -90);
                        break;
                    default:
                        break;
                }
                console.log(dateRange);
                console.log(dateFrom);
                console.log(dateTo);
                $('#LAY-date-from').val(dateFrom);
                $('#LAY-date-to').val(dateTo);
                reloadList();
            };

            nextRange = function () {
                var dateFrom = $('#LAY-date-from').val();
                var newDateFrom = calculateDate(dateFrom, 1);
                changeDateRange(newDateFrom);
            };

            preRange = function () {
                var dateFrom = $('#LAY-date-from').val();
                var newDateFrom = calculateDate(dateFrom, -1);
                changeDateRange(newDateFrom);
            };

            var calculateDate = function (date, days) {
                // 参数表示在当前日期下要增加的天数
                var now = new Date(date);
                // + 1 代表日期加，- 1代表日期减
                now.setDate(now.getDate() + days);
                return formatDate(now);
            };

            var formatDate = function (now) {
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var day = now.getDate();
                if (month < 10) {
                    month = '0' + month;
                }
                if (day < 10) {
                    day = '0' + day;
                }
                return year + '-' + month + '-' + day;
            }
        });

    </script>
    <script type="text/html" id="wechatNumTpl">
        <label style="color: blue;">{{ d.wechat_total }}</label>/<label style="color: green;">{{ d.wechat_online }}</label>（封<label style="{{ d.wechat_forbidden>0 ? 'color: red;' : '' }};">{{ d.wechat_forbidden }}</label>个，<label style="{{ d.wechat_forbidden>0 ? 'color: red;' : '' }};">{{ d.wechat_forbidden_percent }}</label>）
    </script>
    <script type="text/html" id="totalTpl">
        {{ d.request-d.friend }}
    </script>
    <script type="text/html" id="friendRateTpl">
        {{# if(d.request > 0){ }}
        {{ ((d.friend/d.request)*100).toFixed(2) }}%
        {{# } else { }}
        -
        {{# } }}
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-primary" href="/report/wechat/{{d.group_id}}" target="_blank">微信列表</a>
    </script>
    <script type="text/html" id="friendTpl">
        {{ d.friend }} / {{ d.one_way }}
    </script>
    <script type="text/html" id="versionTpl">
        {{ d.version || '默认' }}
    </script>
</div>
</body>
</html>
